<template>
  <div class="dashboard-container">
    <div>
      <span style="margin-left:2%;margin-top:100px">网关服务</span>
    </div>
    <div class="sysinfo-contaoner">
      <el-card class="card">
        <div class="card-header">
          <span>CPU使用率</span>
        </div>
        <el-divider />
        <div class="card-body">
          <el-progress type="circle" :percentage="centerinfo.cpuPercent" />
        </div>
        <div class="bottom">
          <div class="hozbottom1">
            <span>cpu主频</span>
            <span class="rl">{{ centerinfo.cpuGhz }}Ghz</span>
          </div>
          <el-divider />
          <span>cpu核心</span>
          <span class="rl">{{ centerinfo.cpuCount }}核</span>
        </div>
      </el-card>
      <el-card class="card">
        <div class="card-header">
          <span>内存使用率</span>
        </div>
        <el-divider />
        <div class="card-body">
          <el-progress type="circle" :percentage="centerinfo.memPercent" />
        </div>
        <div class="bottom">
          <div class="hozbottom1">
            <span>总内存</span>
            <span class="rl">{{ centerinfo.memTotal }}G</span>
          </div>
          <el-divider />
          <span>已用内存</span>
          <span class="rl">{{ centerinfo.memUsed }}G</span>
        </div>
      </el-card>
      <el-card class="card">
        <div class="card-header">
          <span>磁盘信息</span>
        </div>
        <el-divider />
        <div class="card-body">
          <el-progress type="circle" :percentage="centerinfo.diskPercent" />
        </div>
        <div class="bottom">
          <div class="hozbottom1">
            <span>总磁盘</span>
            <span class="rl">{{ centerinfo.diskTotal }}G</span>
          </div>
          <el-divider />
          <span>已用磁盘</span>
          <span class="rl">{{ centerinfo.diskUsed }}G</span>
        </div>
      </el-card>
      <el-card class="card">
        <div class="card-header">
          <span>数据统计</span>
        </div>
        <el-divider />
        <div class="bottom">
          <div class="hozbottom1">
            <span>服务</span>
            <span class="rl">{{ centerinfo.storeTotal }}</span>
          </div>
          <el-divider />
          <span>节点</span>
          <span class="rl">{{ centerinfo.nodeTotal }}</span>
          <el-divider />
          <span>文件总数</span>
          <span class="rl">{{ centerinfo.fileTotal }}</span>
          <el-divider />
        </div>
      </el-card>
    </div>
    <div class="title-container">
      <span style="margin-left:2%;align-self: center;">存储服务</span>
      <el-select v-model="optionsdefualt" placeholder="Select" class="select-service" @change="selectstore">
        <el-option
          v-for="item in storelist"
          :key="item.storeId"
          :label="item.storeIp"
          :value="item.storeId"
        />
      </el-select>
    </div>
    <div class="sysinfo-contaoner">
      <el-card class="card">
        <div class="card-header">
          <span>CPU使用率</span>
        </div>
        <el-divider />
        <div class="card-body">
          <el-progress type="circle" :percentage="storeinfo.cpuPercent" />
        </div>
        <div class="bottom">
          <div class="hozbottom1">
            <span>cpu主频</span>
            <span class="rl">{{ storeinfo.cpuGhz }}Ghz</span>
          </div>
          <el-divider />
          <span>cpu核心</span>
          <span class="rl">{{ storeinfo.cpuCount }}核</span>
        </div>
      </el-card>
      <el-card class="card">
        <div class="card-header">
          <span>内存使用率</span>
        </div>
        <el-divider />
        <div class="card-body">
          <el-progress type="circle" :percentage="storeinfo.memPercent" />
        </div>
        <div class="bottom">
          <div class="hozbottom1">
            <span>总内存</span>
            <span class="rl">{{ storeinfo.memTotal }}G</span>
          </div>
          <el-divider />
          <span>已用内存</span>
          <span class="rl">{{ storeinfo.memUsed }}G</span>
        </div>
      </el-card>
      <el-card class="card">
        <div class="card-header">
          <span>磁盘信息</span>
        </div>
        <el-divider />
        <div class="card-body">
          <el-progress type="circle" :percentage="storeinfo.diskPercent" />
        </div>
        <div class="bottom">
          <div class="hozbottom1">
            <span>总磁盘</span>
            <span class="rl">{{ storeinfo.diskTotal }}G</span>
          </div>
          <el-divider />
          <span>已用磁盘</span>
          <span class="rl">{{ storeinfo.diskUsed }}G</span>
        </div>
      </el-card>
      <el-card class="card">
        <div class="card-header">
          <span>Swap信息</span>
        </div>
        <el-divider />
        <div class="card-body">
          <el-progress type="circle" :percentage="storeinfo.swapPercent" />
        </div>
        <div class="bottom">
          <div class="hozbottom1">
            <span>总Swap</span>
            <span class="rl">{{ storeinfo.swapTotal }}G</span>
          </div>
          <el-divider />
          <span>已用Swap</span>
          <span class="rl">{{ storeinfo.swapUsed }}G</span>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getsysteminfo } from '@/api/system'
import { getstoresysteminfo } from '@/api/system'
import { getstoreoptionlist } from '@/api/store'
export default {
  name: 'Dashboard',

  data() {
    return {
      optionsdefualt: '',
      centerinfo: {
        cpuPercent: 0.00,
        cpuCount: 0,
        cpuGhz: 0.00,
        diskPercent: 0.00,
        diskTotal: 0,
        diskUsed: 0,
        swapTotal: 0,
        swapUsed: 0,
        swapPercent: 0.00,
        memPercent: 0.00,
        memTotal: 0,
        memUsed: 0,
        fileTotal: 0,
        nodeTotal: 0,
        storeTotal: 0
      },
      storeinfo: {
        cpuPercent: 0.00,
        cpuCount: 0,
        cpuGhz: 0.00,
        diskPercent: 0.00,
        diskTotal: 0,
        diskUsed: 0,
        swapTotal: 0,
        swapUsed: 0,
        swapPercent: 0.00,
        memPercent: 0.00,
        memTotal: 0,
        memUsed: 0
      },
      storelist: []
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    this.getSysInfo()
    this.getStoreOptionList()
  },
  methods: {
    getSysInfo() {
      getsysteminfo().then(response => {
        this.centerinfo = response.data
      })
    },
    getStoreOptionList() {
      getstoreoptionlist().then(response => {
        this.storelist = response.data
        console.log(response.data)
        this.optionsdefualt = this.storelist[0].storeIp
        this.getStoreSysInfo({ storeid: this.storelist[0].storeId })
      })
    },
    getStoreSysInfo(data) {
      getstoresysteminfo(data).then(response => {
        this.storeinfo = response.data
      })
    },
    selectstore(index) {
      this.getStoreSysInfo({ storeid: index })
    }
  }
}
</script>

<style lang="scss" scoped>
  .title-container {
    display: flex;
    margin-top: 50px;
  }
  .select-service {
    margin-left: 10px;
  }
  .sysinfo-contaoner {
    display: flex;
    margin-top: 20px;
  }
  .rl {
    float: right;
    margin-left: 10px;
  }
  .card {
    width: 20%;
    margin-left: 2%;
    margin-right: 2%;
  }
  .card-body {
    width: 100%;
    text-align: center;
  }
 .card-header {
  align-items: center;
}
.bottom {
  width: 100%;
  padding: auto;
}

.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
